<!DOCTYPE html>
<html lang="en">
<head>

    <style>
    .arrow {
        margin: 25px;
        display: inline-block;
        height: 12px;
        position: relative;
        width: 12px;
    }
    .arrow::after {
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-right-style: solid;
        border-right-width: 2px;
        content: '';
        display: inline-block;
        height: 12px;
        left: 0;
        position: absolute;
        top: 0;
        width: 12px;
    }
    .arrow.arrow-bar::before {
        bottom: 1px;
        content: '';
        height: 20px;
        position: absolute;
        right: 0;
        transform-origin: bottom;
        width: 2px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .arrow.is-right {
        -moz-transform: rotate(315deg);
        -ms-transform: rotate(315deg);
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .arrow::after,
    .arrow .arrow::after {
        border-color: red;
    }
    .arrow.is-triangle::after,
    .arrow .arrow.is-triangle::after {
        border-color: transparent;
        border-bottom-color: red;
    }
    .arrow::before,
    .arrow .arrow::before {
        background-color: red;
    }
    </style>
</head>

<body>
    <span class="arrow arrow-bar is-right"></span>
</body>
</html>